<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>窗口评价</title>  
    <style>  
        /* 基础样式 */  
        body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 0;  
        } 

        #root{
            width: 100%;
            height: auto;
            /* text-align: left; */
        }
        .parent{
            width: 100%;
            height: auto;
            margin: auto;
        }
        .blk{
            /* margin-left: 15px; */
            width: 90%; 
            height: 40px;
            margin:auto;
            margin-top: 30px;
            border-bottom: 1px black solid;
            /* background-color: blueviolet; */
        }

        label{
            width: 20%;
            line-height: 40px;
        }
        input{
            width: 70%;
            height: 30px; 
            margin:auto;
            margin-left: 5px;
            border: 0px;
            font-size: 17px;
            outline: none;
        }
        .fas{
            width: 25px;
            height: 25px;
            margin-left: 5px;
            
        }
  
  
        /* 提交按钮样式 */  
        .submit-btn {  
            display: block;  
            width: 90%; 
            margin: auto;
            padding: 10px;  
            background-color: #4CAF50;  
            color: white;  
            border: none;  
            border-radius: 4px;  
            cursor: pointer;  
            text-align: center;
            margin-top: 40px;
        }  
  
        /* 响应式布局 */
        /* @media (max-width: 600px) {  
            .evaluation-container {  
                padding: 10px;  
            }  
  
            .star-rating img {  
                font-size: 20px;  
            }  
        }  */
    </style>  
</head>  
<body>  
    <div id="root">
        <div class="parent">
            <div class="blk" style="margin-top: 40px;">
                <label for="input1">部门名称：</label>
                <input id="input1" type="text"onfocus="this.blur();">
            </div>
            <div class="blk">
                <label for="input2">窗口名称：</label>
                <input id="input2" type="text" onfocus="this.blur();">
            </div>
            <div class="blk">
                <label for="input3">窗口人员：</label>
                <input id="input3" type="text" onfocus="this.blur();">
            </div>
            <div class="blk star-rating"> 
                
                <label><label style="color: red;">*</label>窗口评价：</label>
                <div style="display: inline-block;vertical-align: middle;">
                    <img class="fas fa-star" src="./static/五角星_空.svg" onclick="rate(1)" style="margin-left: 15px;"></img> 
                    <img class="fas fa-star" src="./static/五角星_空.svg" onclick="rate(2)"></img> 
                    <img class="fas fa-star" src="./static/五角星_空.svg" onclick="rate(3)"></img> 
                    <img class="fas fa-star" src="./static/五角星_空.svg" onclick="rate(4)"></img> 
                    <img class="fas fa-star" src="./static/五角星_空.svg" onclick="rate(5)"></img>
                </div> 
            </div> 
            <div class="blk" >
                              
                <label for="input4"><label style="color: red;">*</label>您的姓名：</label>
                <input id="input4" type="text" />
            </div>
            <div class="blk" >
                
                <label for="input5"><label style="color: red;">*</label>您的电话：</label>
                <input id="input5" type="text" />
            </div>

        </div>  
        <div class="parent" >
            <button class="submit-btn" onclick="submitEvaluation()">提交评价</button>  
        </div>
    </div>  
  
    <script>  
        // 星级评价逻辑  
        let rating = 0;
        let worer_bumen = "卸甲坪土家族乡便民服务中心";
        let worker_name = "";
        let worker_window = "";
        let username = "";
        let usertell = "";

        // url = "?name=''&window=''"
        window.onload = function(){

            const queryString = window.location.search.substring(1); // 移除开头的'?'  
            const params = new URLSearchParams(queryString);
            
            //按参数名获取参数值
            worker_name = decodeURIComponent(params.get('name')); 
            worker_window = decodeURIComponent(params.get('work'));

            document.getElementById("input1").value = worer_bumen
            document.getElementById("input2").value = worker_window
            document.getElementById("input3").value = worker_name

        }

        function rate(stars) {  
            rating = stars;

            // 清除之前的激活状态  
            let starsElements = document.querySelectorAll('.star-rating img'); 
            starsElements.forEach(ele => {ele.src = "./static/五角星_空.svg"}); 
             
            // 激活当前选中的星星  
            for (let i = 0; i < stars; i++) {  
                starsElements[i].src = "./static/五角星.svg";
            }  
        }  
  
        // 提交评价逻辑（这里只是简单打印到控制台，实际开发中可能会发送到服务器）  
        function submitEvaluation() {  
            alert(`您评价了${worker_window}的${worker_name},评价结果是：${rating} 星`);  
            // 这里可以添加更多逻辑，比如发送评价到服务器等  
        }  
    </script>  
</body>  
</html>